<div>
  <kb-form
    simple
    v-if="mappedFields.length"
    class="col-md-11 margin-bottom-25 form-horizontal"
    :model="model"
    :rules="rules"
    ref="panelForm"
  >
    <kb-form-item
      class="margin-bottom-15"
      v-for="(field, index) in mappedFields"
      :key="index"
      :prop="field.prop"
      v-show="isShow(field)"
    >
      <component
        :is="field.controlName"
        :field="field"
        @media-dialog-data="$emit('media-dialog-data',$event)"
      ></component>
    </kb-form-item>
  </kb-form>
  <template v-else>
    No field Yet
  </template>
  <div class="col-md-11 form-horizontal">
    <!-- CATEGORY START -->
    <div v-if="categories.length && !isMultiContent">
      <div
        class="form-group margin-bottom-10"
        v-for="(category,index) in categories"
        :key="index"
      >
        <label class="col-md-3 control-label"
          >{{ category.alias || category.display }}</label
        >
        <div class="col-md-9">
          <div class="file-list">
            <ul v-if="category.contents.length">
              <li v-for="(content, cidx) in category.contents" :key="cidx">
                {{ content.values[Object.keys(content.values)[0]]}}
                <a
                  href="javascript:;"
                  data-toggle="tooltip"
                  title="Remove"
                  @click="removeCategory(category, content)"
                >
                  <i class="fa fa-remove"></i>
                </a>
              </li>
            </ul>
            <span
              class="btn btn-file green"
              @click="onShowCategoryDialog(category)"
              >{{ Kooboo.text.common.select }}</span
            >
          </div>
        </div>
      </div>
    </div>
    <div
      class="modal category-dialog"
      data-backdrop="static"
      v-kb-modal="showCategoryDialog"
      style="z-index: 200002"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" @click="onHideCategoryDialog"
              ><i class="fa fa-close"></i
            ></button>
            <h4 class="modal-title"
              >{{ Kooboo.text.component.fieldPanel.categories }}</h4
            >
          </div>
          <div class="modal-body">
            <div class="panel panel-default">
              <div class="panel-body">
                <div class="form-group">
                  <div class="col-md-12">
                    <div id="categoryTree"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button @click="onSaveCategory" type="button" class="btn green"
              >{{ Kooboo.text.common.save }}</button
            >
            <button @click="onHideCategoryDialog" type="button" class="btn gray"
              >{{ Kooboo.text.common.cancel }}</button
            >
          </div>
        </div>
      </div>
    </div>
    <!-- CATEGROIES END -->

    <!-- EMBEDDED START -->
    <div v-if="embedded.length && !isMultiContent">
      <div
        class="form-group margin-bottom-10"
        v-for="($data, $index) in embedded"
        :key="$index"
      >
        <label class="col-md-3 control-label"
          >{{ $data.alias || $data.embeddedFolder.name }}</label
        >
        <div class="col-md-9">
          <div class="file-list">
            <span class="btn btn-file green" @click="addEmbedded($data)"
              >Edit</span
            >
            <span>
              <a class="btn btn-default disabled" href="#"
                ><span>Embedded count</span>:&nbsp; {{ $data.contents.length }}
              </a>
            </span>
          </div>
        </div>
      </div>
    </div>

    <kb-embedded-dialog
      :choosed-embedded="currentEmbedded"
    ></kb-embedded-dialog>
    <!-- EMBEDDED END -->
  </div>
</div>
